<script setup lang="ts">
import { ref } from 'vue';
import BottomModal from './components/gengduo.vue';
const ShareImage = ref([
    "/static/images/icon_qq.png",
    "/static/images/icon_qqkongjian.png",
    "/static/images/icon_wechat.png",
    "/static/images/icon_pengyouquan.png",
    "/static/images/icon_xinlangweibo.png",

])
const showModal = ref(false)
const showBot = ref(true)
const handleClickOutside = (event: TouchEvent) => {
    const query = uni.createSelectorQuery();
    query.select('.bottmo-box').boundingClientRect((rects) => {
        const rect = Array.isArray(rects) ? rects[0] : rects;
        if (rect) {
            const { left, right, top, bottom } = rect;
            const touch = event.changedTouches[0];
            if (touch) {
                const { clientX: x, clientY: y } = touch;
                if (x < left! || x > right! || y < top! || y > bottom!) {
                    showBot.value = false;
                }
            }
        }
    }).exec();
};
const handleScrollToLower = () => {
    console.log("滚动触底");
    // showBot.value = true
}
</script>
<template>
    <scroll-view scroll-y class="scroll-view" @scrolltolower="handleScrollToLower" @touchend="handleClickOutside">
        <view class="header-box">
            <view class="vicc">
                <view class="article-box">XX平台：最新政策标题
                </view>
                <text
                    class="titles-box">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</text>
                <view class="lv">
                    <text class="vi1">来源:XXXX</text>
                    <text class="vi2">1万浏览
                    </text>
                </view>
                <view class="share-box">
                    <view class="sh1">分享至
                    </view>
                    <view class="win">
                        <view class="flex-item" v-for="(imageSrc, index) in ShareImage" :key="index">
                            <image :src="imageSrc" mode="scaleToFill" class="images"
                                :style="index === 3 ? 'width:70rpx;height:70rpx;margin-top:15rpx;' : ''" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mid-box"></view>

        <view class="tall-box">
            <view class="tt1">
                <view class="t1">
                    <view>评论</view>
                    <view>&nbsp;50</view>
                </view>
            </view>
            <view v-for="index in 10" :key="index" class="comment-wrapper">
                <view class="comment">
                    <view class="tou1">
                        <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg" mode="scaleToFill"
                            class="im2" />
                    </view>
                    <view class="mid-vi">
                        <view class="he1">用户昵称
                        </view>
                        <view class="tit1">2024-05-08
                        </view>
                        <text class="pi1">评论内容：XXXXXXXX</text>
                    </view>
                    <view class="r-vi">
                        <view hover-class="none" class="re">
                            <image src="/static/images/icon_sort_default.png" mode="scaleToFill" class="r1" />
                            <text class="r2">按热度
                            </text>
                        </view>
                        <view class="mi-1" @click="showModal = true">
                            <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill" class="m1" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="gei-box">没有更多数据了</view>
        </view>
    </scroll-view>
    <view class="bottmo-box" v-show="showBot">
        <view class="comment-box">
            <input type="text" name="" value="" placeholder="写下你的评论..." class="com-box">
        </view>
        <view class="god">
            <image src="/static/images/thumbs-up.png" mode="scaleToFill" class="gods" />
        </view>
        <view class="tl1">50</view>
        <view class="xi">
            <image src="/static/images/star.png" mode="scaleToFill" class="xis" />
        </view>
        <view class="z1">101</view>
        <view class="s1">分享</view>
        <view class="q1">
            <image src="/static/images/编组.png" mode="scaleToFill" class="mas" />
        </view>
    </view>
    <!-- 更多 -->
    <BottomModal :visible="showModal" @update:visible="showModal = $event">
        <!-- 在这里放置你想在模态窗口中显示的内容 -->
    </BottomModal>

</template>
<style lang="scss">
page {
    position: relative;
    height: 100%;
    // overflow: hidden;

}

.scroll-view {
    flex: 1;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.vic {
    // position: absolute;
    margin: 0 60rpx;
    display: flex;
}

.header-box {
    // position: relative;
    display: flex;
    width: 750rpx;
    height: 912rpx;

    .article-box {
        display: flex;
        position: absolute;
        top: 60rpx;
        left: 56rpx;
        width: 448rpx;
        height: 42rpx;
        font-size: 40rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #000000;
        line-height: 46rpx;
    }

    .titles-box {
        display: flex;
        position: absolute;
        margin-top: 200rpx;
        margin-left: 64rpx;
        width: 626rpx;
        height: 400rpx;
        font-size: 22rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #333333;
        line-height: 30rpx;
        letter-spacing: 0.08rpx;
        overflow-wrap: break-word;
        word-break: break-all;
    }

    .lv {
        position: absolute;
        width: 750rpx;
        height: 68rpx;
        top: 692rpx;

        .vi1 {
            position: absolute;
            right: 60rpx;
            width: 240rpx;
            height: 68rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: RIGHT;
            color: #c0bfbf;
            line-height: 28rpx;
        }

        .vi2 {
            position: absolute;
            justify-content: center;
            left: 42rpx;
            width: 136rpx;
            height: 30rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #c0bfbf;
            line-height: 28rpx;
        }
    }

    .share-box {
        display: flex;
        width: 750rpx;
        height: 82rpx;
        position: absolute;
        top: 806rpx;

        .sh1 {
            display: flex;
            width: 136rpx;
            height: 30rpx;
            margin-top: 24rpx;
            justify-content: center;
            margin-left: 40rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #949090;
            line-height: 28rpx;
        }

        .win {
            position: absolute;
            display: flex;
            right: 70rpx;
            width: 488rpx;
            height: 82rpx;
            justify-content: space-between;

            .flex-item {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                margin-right: 20rpx;
                border-radius: 5rpx;

                &:last-child {
                    margin-right: 0;
                }
            }

            .images {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
            }
        }
    }


}

.mid-box {
    display: flex;
    height: 36rpx;
    background: #fffaec;
}


.gei-box {
    display: flex;
    height: 200rpx;
    width: 100%;
    background: #ffffff;
    justify-content: center;
}

.tall-box {
    display: flex;
    flex-direction: column;
    width: 750rpx;
    height: 100%;

    .tt1 {
        display: flex;
        position: sticky;
        align-items: center;
        top: 0;
        height: 86rpx;
        width: 750rpx;
        background: #ffffff;

        .t1 {
            display: flex;
            margin-top: 28rpx;
            width: 130rpx;
            height: 30rpx;
            background: #ffffff;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #f2bb16;
            justify-content: center;
            align-items: center;
            line-height: 28rpx;
        }
    }

    .comment {
        display: flex;
        // margin-top: 20rpx;
        width: 750rpx;
        height: 222rpx;
        margin-left: 0rpx;
        border: 1rpx solid #c0bfbf;
        background: #ffffff;
        margin-bottom: 0;

        .mid-vi {
            display: flex;
            margin-top: 72rpx;
            margin-left: 12rpx;
            height: 130rpx;
            width: 500rpx;
            // background: #24b33c;
            flex-direction: column;

            .he1 {
                display: flex;
                // background: #f0f0f0;
                width: 300rpx;
                height: 30rpx;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #000000;
                line-height: 28rpx;
                align-items: center;
            }

            .tit1 {
                display: flex;
                // background: #f00404;
                margin-left: 0;
                margin-top: 0;
                width: 128rpx;
                height: 30rpx;
                font-size: 20rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #c0bfbf;
                line-height: 24rpx;
                align-items: center;
            }

            .pi1 {
                display: flex;
                width: 276rpx;
                height: 30rpx;
                // background: #284dc5;
                font-size: 24rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                color: #000000;
                line-height: 28rpx;
            }

        }

        .r-vi {
            display: flex;
            margin-right: 0;
            margin-left: 5rpx;
            height: 222rpx;
            width: 130rpx;
            background: #ffffff;
            flex-direction: column;

            .re {
                display: flex;
                width: 100rpx;
                height: 30rpx;
                margin-top: 26rpx;

                .r1 {
                    max-width: 30rpx;
                    max-height: 30rpx;
                }

                .r2 {
                    display: flex;
                    left: 30rpx;
                    width: 70rpx;
                    height: 30rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #949090;
                    line-height: 24rpx;
                    justify-content: center;
                    align-items: center;
                }

            }

            .mi-1 {
                display: flex;
                margin-top: 110rpx;
                width: 32rpx;
                height: 32rpx;
                margin-left: 80rpx;

                .m1 {
                    display: flex;
                    width: 32rpx;
                    height: 32rpx;
                }
            }

        }


        .tou1 {
            display: flex;
            margin-top: 72rpx;
            margin-left: 34rpx;
            width: 76rpx;
            height: 76rpx;
            // border: 2rpx solid #c0bfbf;

            .im2 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                /* 保持图片比例并填充整个区域 */
                border-radius: 50%;
                /* 让图片呈现圆形 */
            }

        }



    }


}

.bottmo-box {
    display: flex;
    position: absolute;
    height: 144rpx;
    bottom: 0;
    width: 750rpx;
    margin-top: 364rpx;
    background: #ffffff;
    z-index: 999;
    border: 1px solid #c0bfbf;

    .comment-box {
        position: absolute;
        display: flex;
        margin-top: 28rpx;
        margin-left: 76rpx;
        width: 304rpx;
        height: 46rpx;
        background: #f0f0f0;
        border-radius: 10rpx;

        .com-box {
            display: flex;
            margin-top: 2rpx;
            margin-left: 18rpx;
            width: 188rpx;
            height: 30rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #545050;
            line-height: 28rpx;
        }
    }

    .god {
        display: flex;
        position: absolute;
        margin-left: 410rpx;
        margin-top: 25rpx;
        width: 48rpx;
        height: 48rpx;

        .gods {
            display: flex;
            position: absolute;
            width: 48rpx;
            height: 48rpx;
        }
    }

    .tl1 {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 450rpx;
        margin-top: 40rpx;
        width: 56rpx;
        height: 30rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        line-height: 28rpx;
        color: #545050;
    }

    .xi {
        display: flex;
        position: absolute;
        margin-left: 520rpx;
        margin-top: 25rpx;
        width: 48rpx;
        height: 48rpx;

        .xis {
            display: flex;
            position: absolute;
            width: 48rpx;
            height: 48rpx;
        }
    }

    .z1 {
        position: absolute;
        display: flex;
        margin-top: 40rpx;
        width: 56rpx;
        height: 30rpx;
        justify-content: center;
        align-items: center;
        margin-left: 568rpx;
        background: #ffffff;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #545050;
        line-height: 28rpx;
    }

    .s1 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
        margin-left: 668rpx;
        width: 56rpx;
        height: 30rpx;
        background: #ffffff;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #545050;
        line-height: 28rpx;
    }

    .q1 {
        display: flex;
        position: absolute;
        // background: #1a83d9;
        margin-top: 76rpx;
        width: 750rpx;
        height: 68rpx;
        z-index: 999;

        .mas {
            display: flex;
            width: 750rpx;
            height: 68rpx;
        }
    }
}
</style>